
import React from 'react'
import { IGoodList } from '@/model/declare'
import { Card } from '@/components/Card'
import { GoodEle, Direction } from '@/components/Good'
// import { useLocalStore, Observer } from 'mobx-react'
import { Observer, useLocalStore } from 'mobx-react-lite'

import { cartModel } from '@/model/CartModel'


export const OneGoodsList: React.FC<IGoodList> = (props) => {

    const store = useLocalStore(() => cartModel)
    return (
        <Card title={props.title}>
            {
                props.items.filter(it => it).map((it, idx) => {
                    return (
                        <Observer>
                            {() => {
                                return (<GoodEle
                                  direction={Direction.ROW}
                                  img={it.main_pic}
                                  title={it.nick || it.name}
                                  desc={it.brief}
                                  price={it.price}
                                  oldPrice={it.market_price}
                                  discount={it.dis}
                                  number={it.number || 0}
                                  id={it.id}
                                  onAdd={async (num) => {
                                        const ans = await store.addCart({
                                            number: num,
                                            Good: it
                                        })
                                        return ans;
                                    }}
                                  key={idx}
                                />)
                            }
                            }
                        </Observer>
                    )
                })
            }
        </Card>
    )
}
